"use client";
import { useState, useEffect } from "react";
export default function AdvancedCounter() {
  const publicApiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY;
  const secreKey = process.env.SECRET_API_KEY;
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Count changed:", count);

    document.title = `Count: ${count}`;

    // 清理函数
    return () => {
      console.log("组件已销毁，Effect 清理完毕");
    };
  }, [count]);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  const reset = () => {
    setCount(0);
  };

  return (
    <div>
      <h1>Advanced Counter</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <br></br>
      <button onClick={decrement}>Decrement</button>
      <br></br>
      <button onClick={reset}>Reset</button>

      <h3 className="mt-4 text-lg font-bold">环境变量检查 (Client)</h3>
      <p>
        Server Only 变量:{" "}
        <span className="text-red-500">
          {secreKey ? "❌ 错误，不该加载！" : "✅ 成功，未加载"}
        </span>
      </p>
      <p>
        公共变量:{" "}
        <span className="text-green-500">
          {publicApiKey ? "✅ 成功，已加载" : "❌ 失败"}
        </span>
      </p>
    </div>
  );
}
